<template>
  <div style="width:100%;height:100%;" v-cloak>
    <div id="earth_2d" style="width:100%;height:100%">
    
    </div>


  </div>
  
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
var worldGeoJson = {};
var chinaGeoJson = {};
var airDataConfig = [];
var landDataConfig = []; //陆运
//航班信息
var cityCoords = [];
var cityLabels = [];
var openedLines = [];
var openedLinesReturn = [];
var closedLines = [];
var symbolPath = null;

export default {
  name: "worldMap",
  data() {
    return {
      planePath:
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
      truckPath:
        "path://M816.80384 570.40896h-19.64032V343.9616H504.46336l-0.04096 153.78432-3.80928-0.04096v-102.2976h-132.01408l-59.33056 102.44096h-87.28576v72.56064h-14.80704v40.96h14.80704v25.6h51.48672a53.39136 53.39136 0 0 0 52.34688 43.08992 53.37088 53.37088 0 0 0 52.28544-43.08992h252.43648a53.39136 53.39136 0 0 0 52.28544 43.08992c25.96864 0 47.5136-18.5344 52.36736-43.08992h61.99296v-25.6h19.64032v-40.96h-0.02048z m-491.008 89.14944c-18.16576 0-32.8704-14.76608-32.8704-32.84992s14.76608-32.84992 32.8704-32.84992 32.84992 14.76608 32.84992 32.84992-14.7456 32.84992-32.84992 32.84992z m357.00736 0c-18.1248 0-32.84992-14.76608-32.84992-32.84992s14.72512-32.84992 32.84992-32.84992c18.16576 0 32.8704 14.76608 32.8704 32.84992s-14.70464 32.84992-32.8704 32.84992z m93.88032-43.06944h-41.55392c-4.79232-24.51456-26.39872-43.08992-52.3264-43.08992s-47.47264 18.55488-52.28544 43.08992H378.0608a53.37088 53.37088 0 0 0-52.28544-43.08992c-25.92768 0-47.5136 18.55488-52.3264 43.08992h-31.00672v-98.16064h78.58176l59.35104-102.44096h99.7376v102.07232l44.76928 0.43008 0.04096-153.98912h251.71968v252.08832h0.04096z m-384.45056-180.1216h68.68992v79.79008h-114.93376l46.24384-79.79008z",
      warhousePath:
        "path://M433.048 157.845c22.74-23.043 53.113-33.978 83.097-32.752 27.355 0.612 54.457 11.772 74.685 33.277l6.274 6.672 329.473 342.037c18.106 18.797 5.1 50-20.74 50.622l-0.788 0.01-65.135-0.001v296.917c0 60.348-48.43 109.384-108.542 110.358l-1.825 0.015H298.028c-60.954 0-110.368-49.416-110.368-110.373V557.71h-77.709c-26.27 0-39.645-31.365-21.825-50.318l0.55-0.571z m17.17 480.2H332.954c-22.858 0-41.388 18.531-41.388 41.39v117.271c0 22.86 18.53 41.39 41.388 41.39H450.22c22.858 0 41.388-18.53 41.388-41.39v-117.27c0-22.86-18.53-41.39-41.388-41.39z m243.73 0H576.682c-22.858 0-41.388 18.531-41.388 41.39v117.271c0 22.86 18.53 41.39 41.388 41.39h117.266c22.858 0 41.388-18.53 41.388-41.39v-117.27c0-22.86-18.53-41.39-41.388-41.39z m-243.73-246.039H332.954c-22.858 0-41.388 18.531-41.388 41.39v117.271c0 22.86 18.53 41.39 41.388 41.39H450.22c22.858 0 41.388-18.53 41.388-41.39v-117.27c0-22.86-18.53-41.39-41.388-41.39z",
      boatPath:
        "path://M1070.28401 775.28c-57.07 59.38-112.97 88.47-166.11 86.6-38.99-1.4-63.9-18.9-92.73-39.16-32.16-22.59-68.6-48.22-126.08-49.5-57.72-0.76-93.65 25.13-125.15 48.44-30.32 22.43-54.28 40.05-96.36 34.14-34.98-4.97-58.26-19.18-85.21-35.63-27.58-16.84-58.85-35.91-104.13-43.39-80.15-13.36-168.19 16.18-261.6 87.53-11.97 9.15-14.26 26.27-5.12 38.24 9.16 11.99 26.27 14.24 38.24 5.13C127.00401 845.84 200.94401 819.9 265.60401 830.6c34.8 5.75 58.99 20.51 84.6 36.14 28.05 17.12 59.84 36.52 105.95 43.09 64.2 9.04 102.63-19.25 136.5-44.3 28.02-20.73 52.2-39.55 91.49-37.74 40.89 0.91 66.39 18.83 95.92 39.57 31.38 22.06 66.97 47.07 122.14 49.06 2.32 0.09 4.64 0.12 6.95 0.12 67.07 0 134.46-34.78 200.46-103.46 10.44-10.85 10.1-28.13-0.76-38.58-10.86-10.42-28.11-10.07-38.57 0.78zM1143.61401 371.54c-6.87-10.12-18.28-16.16-30.19-16.16l-257.55-3.03c-10.14-0.17-18.98 3.07-26.49 8.92L785.40401 395.4H452.56401V142.9c0-19.4-15.77-35.18-35.17-35.18h-76.6c-19.4 0-35.18 15.78-35.18 35.18v122.85h-16.73l-1.42-48.57c-0.6-19.12-16.05-34.09-35.17-34.09H176.70401c-19.4 0-35.18 15.78-35.18 35.18v90.03H94.03401c-19.4 0-35.17 15.77-35.17 35.17v51.94h-21.98c-11.68 0-22.79 5.61-29.71 15.02-6.93 9.4-8.99 21.69-5.52 32.84l96.18 225.16c0.37 0.87 0.89 1.61 1.34 2.42-27.62 13.99-55.76 31.47-84.47 53.39-11.97 9.15-14.26 26.27-5.12 38.24 9.11 11.97 26.27 14.24 38.23 5.13 80.97-61.84 154.87-87.76 219.57-77.08 34.8 5.77 58.99 20.53 84.6 36.16 28.05 17.12 59.84 36.52 105.96 43.09 64.24 9.02 102.64-19.25 136.5-44.3 28.02-20.71 52.17-39.52 91.5-37.74 40.89 0.89 66.39 18.83 95.93 39.57 31.38 22.06 66.96 47.07 122.12 49.06 2.32 0.09 4.64 0.12 6.96 0.12 67.06 0 134.46-34.78 200.46-103.46 10.44-10.85 10.1-28.13-0.76-38.58-10.85-10.41-28.12-10.09-38.58 0.78-17.16 17.85-34.2 32.61-51.11 44.96l126.43-274.28a36.866 36.866 0 0 0-3.78-34.37zM113.43401 362.85h47.48c19.4 0 35.17-15.78 35.17-35.18v-90.03h37.41l1.42 48.51c0.56 19.16 16 34.16 35.16 34.16h54.94c19.4 0 35.18-15.78 35.18-35.18V162.28h37.81V395.4H113.43401v-32.55z m792.52 358.97c-38.99-1.4-63.88-18.92-92.71-39.16-32.16-22.61-68.61-48.22-126.09-49.5-57.72-0.71-93.64 25.13-125.15 48.44-30.33 22.43-54.34 40.07-96.37 34.14-34.98-4.97-58.27-19.18-85.22-35.63-27.58-16.84-58.85-35.93-104.13-43.41-40.59-6.71-83.22-2.37-127.53 12.72-0.26-0.82-0.43-1.65-0.77-2.45l-29.27-68.41h889.03L943.50401 717.89c-12.65 2.91-25.18 4.34-37.55 3.93zM1032.90401 523.99H95.37401L63.71401 449.97h725.22c9.75 0 19.39-3.3 27.14-9.31l43.43-33.7 226.14 2.66L1032.90401 523.99z",
      myChart: null,
      option: {},
      // baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg"
      context: {
        geoStyle: {
          backgroundColor: "black",
          areaColor: "#274b92",
          labelColor: "#fff",
          areaBorderWidth: 1,
          areaBorderColor: "#3c3c3c",
          chinaRegionColor: "#ac4a26"
        },
        currStyle: {},
        styles: {
          plane: {
            opened: {
              line1: {
                color: "#9ae5fc",
                opacity: 0,
                width: 0,
                curveness: 0.2,
                trail: {
                  length: 0.7,
                  opacity: 1,
                  symbolSize: 3,
                  period: 3,
                  color: "#fff"
                }
              },
              line2: {
                color: "#9ae5fc",
                opacity: 0.6,
                width: 1,
                curveness: 0.2,
                trail: {
                  width: 2,
                  length: 0,
                  period: 3,
                  opacity: 0.6,
                  symbolSize: 15,
                  color: "#fff"
                }
              },

              scatter: {
                scale: 4,
                symbolSize: 10,
                color: "#9ae5fc"
              }
            },
            closed: {
              color: "#9ae5fc",
              opacity: 0.5,
              width: 1,
              curveness: 0.2,
              trail: {
                length: 0.7,
                opacity: 0.7,
                symbolSize: 3,
                color: "#fff"
              }
            }
          },
          boat: {
            opened: {
              line1: {
                color: "#ffdf30",
                opacity: 0,
                width: 0,
                curveness: 0.2,
                trail: {
                  length: 0.7,
                  opacity: 1,
                  symbolSize: 3,
                  period: 6,
                  color: "#fff"
                }
              },
              line2: {
                color: "#ffdf30",
                opacity: 0.6,
                width: 2,
                curveness: 0.2,
                trail: {
                  width: 2,
                  length: 0,
                  period: 6,
                  opacity: 0.6,
                  symbolSize: 15,
                  color: "#ffdf30"
                }
              },

              scatter: {
                scale: 4,
                symbolSize: 10,
                color: "#ffdf30"
              }
            },
            closed: {
              color: "#ffdf30",
              opacity: 0.3,
              width: 1,
              curveness: 0.2,
              trail: {
                length: 0.7,
                opacity: 0.7,
                symbolSize: 3,
                color: "#fff"
              }
            }
          },
          truck: {
            opened: {
              line1: {
                color: "#9f5eef",
                opacity: 0,
                width: 0,
                curveness: 0.2,
                trail: {
                  length: 0.7,
                  opacity: 1,
                  symbolSize: 3,
                  period: 6,
                  color: "#ddc2ff"
                }
              },
              line2: {
                color: "#9f5eef",
                opacity: 0.6,
                width: 1,
                curveness: 0.2,
                trail: {
                  width: 2,
                  length: 0,
                  period: 6,
                  opacity: 0.6,
                  symbolSize: 15,
                  color: "#ddc2ff"
                }
              },

              scatter: {
                scale: 4,
                symbolSize: 10,
                color: "#9f5eef"
              }
            },
            closed: {
              color: "#9f5eef",
              opacity: 0.5,
              width: 1,
              curveness: 0.2,
              trail: {
                length: 0.7,
                opacity: 0.7,
                symbolSize: 3,
                color: "#fff"
              }
            }
          }
        }
      }
    };
  },

  created() {
    this.importData();
  },

  mounted() {
    var type = this.$route.params.type ? this.$route.params.type : "plane";

    if (type == "plane") {
      this.context.currStyle = this.context.styles.plane;
      this.initPlaneData();
    } else if (type == "truck") {
      this.context.currStyle = this.context.styles.truck;
      this.initTruckData();
    } else if (type == "boat") {
      this.context.currStyle = this.context.styles.boat;
      this.initBoatData();
    } else if (type == "whs") {
      //暂不实现
    }

    var self = this;
    this.initMap();
    var chartDom = document.getElementById("earth_2d");
    this.myChart = echarts.init(chartDom);
    echarts.registerMap("world", worldGeoJson);
    echarts.registerMap("china", chinaGeoJson);
    //  echarts.registerMap("chinaContour", chinaContourJson)
    this.myChart.setOption(this.option);
    window.addEventListener("resize", function() {
      self.myChart.resize();
    });
  },

  methods: {
    importData() {
      //customData = require("@/assets/custom.json");
      airDataConfig = require("@/assets/airway.json");
      landDataConfig = require("@/assets/traf_blc(1).json");
      //  wmsData = require("@/assets/wms_blc.json");
      worldGeoJson = require("@/assets/map/json/world.json");
      chinaGeoJson = require("@/assets/map/json/china.json");
      //chinaContourJson = require("@/assets/map/json/china-contour.json")
    },

    initPlaneData() {
      symbolPath = this.planePath;
      var airports = airDataConfig["airports"];
      var openedRoutes = airDataConfig["routes"];
      var closedRoutes = airDataConfig["routesComming"];
      airports.forEach(p => {
        cityCoords.push({
          name: p[1],
          value: [p[3], p[4]]
        });
      });
      openedRoutes.forEach(p => {
        let from = airports[p[1]];
        let to = airports[p[2]];
        openedLines.push({
          fromName: from[1],
          toName: to[1],
          coords: [[from[3], from[4]], [to[3], to[4]]]
        });

        openedLinesReturn.push({
          fromName: to[1],
          toName: from[1],
          coords: [[to[3], to[4]], [from[3], from[4]]]
        });
      });
      closedRoutes.forEach(p => {
        let from = airports[p[1]];
        let to = airports[p[2]];
        closedLines.push({
          fromName: from[1],
          toName: to[1],
          coords: [[from[3], from[4]], [to[3], to[4]]]
        });
      });
    },

    exists(arrs, locationName) {
      if (arrs == null || arrs.length == 0) return false;
      let len = arrs.length;
      for (let i = 0; i < len; i++) {
        if (arrs[i].name == locationName) {
          return true;
        }
      }
      return false;
    },

    initTruckData() {
      symbolPath = this.truckPath;
      var openedTruck = landDataConfig["kaban_opened"];
      var closedTruck = landDataConfig["kaban_comming"];

      openedTruck.forEach(p => {
        //设置坐标和路由
        if (!this.exists(this.cityCoords, p.from)) {
          cityCoords.push({
            name: p.from,
            value: p["from_position"]
          });
        }

        if (!this.exists(this.cityCoords, p.to)) {
          cityCoords.push({
            name: p.to,
            value: p["to_position"]
          });
        }

        openedLines.push({
          fromName: p.from,
          toName: p.to,
          coords: [p["from_position"], p["to_position"]]
        });
      });

      closedTruck.forEach(p => {
        //设置坐标和路由
        if (!this.exists(this.cityCoords, p.from)) {
          cityCoords.push({
            name: p.from,
            value: p["from_position"]
          });
        }

        if (!this.exists(this.cityCoords, p.to)) {
          cityCoords.push({
            name: p.to,
            value: p["to_position"]
          });
        }

        closedLines.push({
          fromName: p.from,
          toName: p.to,
          coords: [p["from_position"], p["to_position"]]
        });
      });
    },

    initBoatData() {
      symbolPath = this.boatPath;
      var openedBoat = landDataConfig["haiyun_opened"];
      var closedBoat = landDataConfig["haiyun_comming"];

      openedBoat.forEach(p => {
        //设置坐标和路由
        if (!this.exists(this.cityCoords, p.from)) {
          cityCoords.push({
            name: p.from,
            value: p["from_position"]
          });
        }

        if (!this.exists(this.cityCoords, p.to)) {
          cityCoords.push({
            name: p.to,
            value: p["to_position"]
          });
        }

        openedLines.push({
          fromName: p.from,
          toName: p.to,
          coords: [p["from_position"], p["to_position"]]
        });
      });

      closedBoat.forEach(p => {
        //设置坐标和路由
        if (!this.exists(this.cityCoords, p.from)) {
          cityCoords.push({
            name: p.from,
            value: p["from_position"]
          });
        }

        if (!this.exists(this.cityCoords, p.to)) {
          cityCoords.push({
            name: p.to,
            value: p["to_position"]
          });
        }

        closedLines.push({
          fromName: p.from,
          toName: p.to,
          coords: [p["from_position"], p["to_position"]]
        });
      });
    },

    initMap() {
      // 小飞机的图标，可以用其他图形替换
      var series = [];
      var self = this;
      series.push(
        {
          // 白色航线特效图
          type: "lines",
          zlevel: 1, // 用于分层，z-index的效果
          effect: {
            show: true, // 动效是否显示
            period: self.context.currStyle.opened.line1.trail.period, // 特效动画时间
            trailLength: self.context.currStyle.opened.line1.trail.length, // 特效尾迹的长度
            opacity: self.context.currStyle.opened.line1.trail.opacity,
            color: self.context.currStyle.opened.line1.trail.color, // 特效颜色
            symbolSize: self.context.currStyle.opened.line1.trail.symbolSize // 特效大小
          },
          lineStyle: {
            // 正常情况下的线条样式
            color: self.context.currStyle.opened.line1.color,
            width: self.context.currStyle.opened.line1.width, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
            curveness: self.context.currStyle.opened.line1.curveness // 线条曲度
          },
          data: openedLines // 特效的起始、终点位置
        },
        {
          // 小飞机航线效果
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: self.context.currStyle.opened.line2.trail.period,
            trailLength: self.context.currStyle.opened.line2.trail.length,
            symbol: symbolPath, // 特效形状，可以用其他svg pathdata路径代替
            symbolSize: self.context.currStyle.opened.line2.trail.symbolSize
          },
          lineStyle: {
            color: self.context.currStyle.opened.line2.color,
            width: self.context.currStyle.opened.line2.width,
            opacity: self.context.currStyle.opened.line2.opacity,
            curveness: self.context.currStyle.opened.line2.curveness
          },
          data: openedLines // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
        },
        {
          // 散点效果
          type: "effectScatter",
          coordinateSystem: "geo", // 表示使用的坐标系为地理坐标系
          zlevel: 3,
          rippleEffect: {
            brushType: "stroke", // 波纹绘制效果
            scale: self.context.currStyle.opened.scatter.scale
          },
          symbolSize: self.context.currStyle.opened.scatter.symbolSize,
          label: {
            // 默认的文本标签显示样式
            show: true,
            position: "bottom", // 标签显示的位置
            formatter: "{b}" // 标签内容格式器
          },
          itemStyle: {
            color: self.context.currStyle.opened.scatter.color
          },
          data: cityCoords
        }
      ); // 用来存储地图数据

      series.push({
        type: "lines",
        zlevel: 2, // 用于分层，z-index的效果
        symbol: ["none", "arrow"],
        effect: {
          show: false, // 动效是否显示
          trailLength: this.context.currStyle.closed.trail.length, // 特效尾迹的长度
          color: this.context.currStyle.closed.trail.color, // 特效颜色
          symbolSize: this.context.currStyle.closed.trail.symbolSize, // 特效大小
          symbol: "none"
        },
        lineStyle: {
          // 正常情况下的线条样式
          color: this.context.currStyle.closed.color,
          opacity: this.context.currStyle.closed.opacity,
          width: this.context.currStyle.closed.width, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
          curveness: this.context.currStyle.closed.curveness // 线条曲度
        },
        data: closedLines // 特效的起始、终点位置
      });

      // 最后初始化世界地图中的相关数据
      this.option = {
        backgroundColor: this.context.geoStyle.backgroundColor,
        title: {
          show: "false"
        },
        geo: {
          map: "world", // 与引用进来的地图js名字一致
          roam: true, // 禁止缩放平移
          label: {
            show: false,
            color: this.context.geoStyle.labelColor
          },
          itemStyle: {
            // 每个区域的样式
            areaColor: this.context.geoStyle.areaColor,
            color: this.context.geoStyle.labelColor,
            borderColor: this.context.geoStyle.areaBorderColor,
            borderWidth: this.context.geoStyle.areaBorderWidth
          },
          emphasis: {
            label: {
              show: true,
              color: this.context.geoStyle.labelColor
            },
            itemStyle: {
              areaColor: "#161a1f",
              color: this.context.geoStyle.labelColor
            }
          },
          regions: [
            {
              // 选中的区域,覆盖默认样式
              name: "China",
              selected: true,
              itemStyle: {
                areaColor: this.context.geoStyle.chinaRegionColor
              },
              emphasis: {
                itemStyle: {
                  areaColor: this.context.geoStyle.chinaRegionColor
                }
              },
                select:{
                  label:{
                    show: false,
                    color: this.context.geoStyle.labelColor
                  },
                  itemStyle:{
                      areaColor: this.context.geoStyle.chinaRegionColor,
                  }
              },
            }
          ]
        },
        series: series, // 将之前处理的数据放到这里
        textStyle: {
          fontSize: 12
        }
      };
    }
  }
};
</script>

<style>
[v-cloak] {
  display: none;
}

/* body {
  width: 100%;
  height: 100%;
} */
</style>
